<template>
  <div class="terms-page">
    <!-- 顶部横幅 -->
    <div class="terms-banner">
      <div class="banner-content">
        <h1>服务条款</h1>
        <p>请仔细阅读以下条款，这些条款规定了您使用我们服务的权利和义务。</p>
      </div>
      <div class="banner-waves">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28">
          <defs>
            <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="wave-group">
            <use href="#wave" x="48" y="0" fill="rgba(255,255,255,0.7)" />
            <use href="#wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
            <use href="#wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
            <use href="#wave" x="48" y="7" fill="rgba(255,255,255,0.1)" />
          </g>
        </svg>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="terms-content">
      <aside class="terms-sidebar">
        <nav class="terms-nav">
          <div v-for="(section, index) in sections" 
               :key="index"
               class="nav-item"
               :class="{ active: currentSection === index }"
               @click="scrollToSection(index)">
            {{ section.title }}
          </div>
        </nav>
      </aside>

      <main class="terms-main">
        <div v-for="(section, index) in sections" 
             :key="index"
             :id="'section-' + index"
             class="terms-section">
          <h2>{{ section.title }}</h2>
          <div class="section-content" v-html="section.content"></div>
        </div>
      </main>

      <aside class="terms-actions">
        <div class="action-card">
          <h3>需要帮助？</h3>
          <p>如果您对服务条款有任何疑问，请联系我们的支持团队。</p>
          <button @click="contactSupport">
            <i class="fas fa-headset"></i>
            联系支持
          </button>
        </div>

        <div class="version-info">
          <div class="version-card">
            <div class="version-header">
              <i class="fas fa-code-branch"></i>
              <span>当前版本</span>
            </div>
            <div class="version-number">v2.1.0</div>
            <div class="version-date">2024-03-15 更新</div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js';

export default {
  name: 'Terms',
  
  data() {
    return {
      currentSection: 0,
      sections: [
        {
          title: '1. 服务说明',
          content: `
            <h3>1.1 服务范围</h3>
            <p>E特尔诺API服务平台（以下简称"本平台"）是一个专业的API服务提供平台，致力于为开发者和企业提供高质量、可靠的API服务。我们的服务范围包括但不限于以下方面：</p>
            <p>数据处理API服务：我们提供多样化的数据处理能力，包括数据清洗、转换、分析等功能。这些服务能够帮助您高效处理各类数据，提升数据价值。我们采用先进的数据处理算法，确保处理结果的准确性和时效性。同时，我们还提供数据处理的定制化服务，可以根据您的具体需求调整处理参数和流程。</p>
            <p>内容分发API服务：我们建立了强大的内容分发网络，支持图片、视频、文档等多种类型的内容加速分发。通过优化的节点布局和智能调度策略，确保内容快速、稳定地传递到最终用户。我们的服务支持多种内容格式，并提供灵活的分发策略配置选项。</p>
            <p>认证授权API服务：我们提供安全可靠的身份认证和授权服务，支持多种认证方式和安全协议。包括基于OAuth2.0的授权机制、多因素认证、访问令牌管理等功能。我们严格遵守安全标准，保护用户的身份信息和访问权限。</p>
            <p>分析统计API服务：我们提供专业的数据分析和统计服务，帮助您深入理解数据特征和趋势。支持实时数据分析、历史数据统计、自定义报表生成等功能。我们的分析工具采用先进的统计算法，确保分析结果的科学性和可靠性。</p>

            <h3>1.2 服务等级</h3>
            <p>为确保您获得最佳的服务体验，我们制定了严格的服务等级标准：</p>
            <p>服务可用性保障：我们承诺提供99.9%的服务可用性。这意味着在任何自然月内，除去计划内维护时间，我们的服务中断时间不会超过43.8分钟。我们通过分布式架构、负载均衡、故障转移等技术手段，确保服务的高可用性。同时，我们建立了完善的监控系统，能够及时发现和处理潜在的问题。</p>
            <p>技术支持服务：我们提供7×24小时的技术支持服务，确保您在使用过程中遇到的问题能够得到及时解决。我们的技术支持团队由经验丰富的工程师组成，能够处理各类技术问题。支持渠道包括在线客服、电话热线、邮件支持等多种方式。对于紧急问题，我们承诺在15分钟内响应。</p>
            <p>性能指标承诺：我们对API服务的性能提供明确的指标承诺。在正常网络条件下，API的平均响应时间不超过200毫秒，95%的请求响应时间不超过500毫秒。我们通过持续的性能优化和监控，确保服务始终保持在最佳状态。</p>
            <p>服务监控和告警：我们建立了全方位的监控系统，对服务的各个环节进行实时监控。包括API可用性监控、性能监控、错误率监控、资源使用监控等。当发现异常情况时，系统会立即触发告警，确保运维团队能够及时处理问题。我们同时提供监控数据的查看接口，方便您了解服务的运行状况。</p>

            <h3>1.3 服务升级与维护</h3>
            <p>为了持续提升服务质量，我们会定期对服务进行升级和维护：</p>
            <p>计划内维护：我们会提前5个工作日通知您计划内的维护工作，包括维护时间、影响范围、预期结果等信息。维护工作通常安排在业务量较少的时段进行，以减少对您业务的影响。在维护期间，我们会实时通报维护进展，确保您了解最新状况。</p>
            <p>服务升级：我们会持续对服务进行优化和升级，包括功能增强、性能优化、安全加固等。对于可能影响您使用的重大升级，我们会提前通知并提供详细的升级说明。我们也会提供必要的技术支持，帮助您顺利完成相关适配工作。</p>
            <p>应急维护：在发生严重的安全漏洞或系统故障时，我们可能需要进行应急维护。我们会第一时间通知您，并采取必要的措施降低对您业务的影响。应急维护结束后，我们会提供详细的事件报告。</p>`
        },
        {
          title: '2. 使用规则',
          content: `
            <h3>2.1 账户管理</h3>
            <p>为了确保您能够安全、有效地使用我们的服务，请您务必遵守以下账户管理规则：</p>
            <p>账户注册：注册账户时，您需要提供真实、准确、完整的信息，并确保这些信息的时效性。对于企业用户，需要提供有效的营业执照和其他必要的资质证明。我们有权对提供的信息进行验证，如发现虚假信息，我们可能会采取限制或终止服务的措施。</p>
            <p>密码管理：您必须设置符合安全要求的密码，建议使用包含大小写字母、数字和特殊字符的组合。定期更改密码，不要与其他网站使用相同的密码。密码泄露时，应立即修改密码并通知我们。我们建议您启用双因素认证，提供额外的安全保护。</p>
            <p>访问凭证：您的API密钥、访问令牌等访问凭证是您使用服务的重要凭证，请妥善保管。不要在公开场合或不安全的环境中展示这些信息。如果怀疑凭证泄露，请立即更换。我们建议定期轮换访问凭证，提高安全性。</p>
            <p>权限管理：企业用户可以创建多个子账号，并根据实际需要分配不同的权限。建议遵循最小权限原则，只授予必要的操作权限。定期审查账号权限，及时清理不再使用的账号。我们提供详细的操作日志，方便您追踪账号的使用情况。</p>

            <h3>2.2 使用限制</h3>
            <p>为了维护平台的稳定运行和所有用户的利益，我们设置了以下使用限制：</p>
            <p>调用频率限制：我们根据不同的服务等级设置了API调用频率限制。基础版用户的调用限制为每秒10次，专业版用户为每秒100次，企业版用户可根据实际需求定制限制。超出限制的请求将被拒绝，并返回相应的错误信息。如果您需要更高的调用限制，可以联系我们进行升级。</p>
            <p>资源使用限制：我们对API调用的资源使用进行限制，包括请求大小、响应大小、处理时间等。单个请求的数据大小不得超过10MB，处理时间不得超过30秒。对于需要处理大量数据的场景，建议您使用批量处理接口或者分批处理的方式。</p>
            <p>并发连接限制：为了确保系统的稳定性，我们限制了单个账号的并发连接数。基础版用户的并发连接限制为10个，专业版用户为50个，企业版用户为200个。超出限制的连接请求将被拒绝。建议您合理控制并发连接数，避免影响服务质量。</p>
            <p>禁止行为：严禁进行以下行为：</p>
            <p>未经授权的访问或破解尝试；利用服务进行违法违规活动；干扰或破坏服务的正常运行；未经许可爬取或抓取数据；分享或转售API访问权限；其他可能损害平台或其他用户利益的行为。如果发现违规行为，我们将视情况采取警告、限制或终止服务等措施。</p>

            <h3>2.3 安全要求</h3>
            <p>为保障服务的安全性，您需要遵守以下安全要求：</p>
            <p>传输安全：所有的API调用必须使用HTTPS协议，确保数据传输的安全性。您需要验证服务器证书的有效性，避免中间人攻击。建议使用TLS 1.2或更高版本的协议，并定期更新加密套件。</p>
            <p>客户端安全：在客户端存储的访问凭证必须进行加密保护。建议使用安全的加密算法和密钥管理方案。定期检查客户端程序的安全性，及时修复已知的安全漏洞。</p>
            <p>日志管理：妥善保管API调用日志，包括调用时间、参数、响应等信息。建议保留至少6个月的日志记录，方便问题排查和安全审计。注意日志中不要记录敏感信息，如密码、密钥等。</p>`
        },
        {
          title: '3. 计费规则',
          content: `
            <h3>3.1 计费方式</h3>
            <p>为了满足不同用户的需求，我们提供多种灵活的计费方式。每种计费方式都有其特点和适用场景，您可以根据实际需求选择最适合的方式：</p>
            <p>按调用次数计费：这是最基础和常用的计费方式。我们会统计您的API调用次数，并根据实际调用量进行计费。计费标准会随着调用量的增加而递减，以此鼓励规模化使用。例如，每月前1万次调用按0.01元/次计费，1-10万次按0.008元/次计费，10万次以上按0.005元/次计费。这种方式适合调用量可预测、业务较为稳定的用户。</p>
            <p>按流量计费：对于涉及大量数据传输的API服务，我们提供基于流量的计费方式。计费标准为每GB数据传输量0.8元，上行和下行流量分开计算。我们提供实时的流量统计功能，您可以随时查看流量使用情况。为了帮助您控制成本，我们还提供流量预警功能，当流量使用达到设定阈值时，系统会自动发送通知。</p>
            <p>包年包月：针对长期稳定使用的用户，我们提供更经济的包年包月方案。您可以预付费购买一定配额的资源包，在有效期内使用。资源包分为不同档位，包含相应的调用次数、流量等资源配额。超出配额的部分将按照按量计费的标准收取。包年包月用户还可以享受专属的技术支持和优先响应服务。</p>

            <h3>3.2 结算规则</h3>
            <p>为了保证服务的持续性和资金的安全性，我们制定了完善的结算规则：</p>
            <p>结算周期：我们采用自然月结算制度。每月1日至月末为一个完整的结算周期。我们会在次月1-3日生成上月的账单，并通过邮件发送给您。账单包含详细的费用明细，如API调用次数、流量使用量、单价、总金额等信息。您可以在收到账单后的7个工作日内提出异议，我们会认真核实并及时回复。</p>
            <p>付款方式：我们支持多种付款方式，包括银行转账、支付宝、微信支付等。对于预付费用户，需要在账户余额不足时及时充值，以免影响服务使用。我们会在账户余额低于警戒值时发送提醒通知。对于后付费用户，需要在收到账单后15天内完成付款。</p>
            <p>信用额度：对于长期合作且信用记录良好的用户，我们可以提供一定的信用额度。信用额度的大小根据用户的历史使用情况、付款记录等因素综合评估。当使用金额超过信用额度时，需要及时付款或充值，否则可能会影响服务的使用。</p>

            <h3>3.3 优惠政策</h3>
            <p>为了回馈用户，我们设置了多项优惠政策：</p>
            <p>新用户优惠：新注册用户可以获得一定额度的免费体验金，用于测试和熟悉我们的服务。体验金有效期为30天，可用于支付API调用费用。同时，新用户在首次充值时可以享受充值金额的20%额外赠送。</p>
            <p>长期用户折扣：使用时间超过6个月的用户可以享受阶梯式的优惠折扣。使用时间6-12个月的用户享受95折优惠，1-2年的用户享受9折优惠，2年以上的用户享受85折优惠。折扣适用于所有计费项目。</p>
            <p>大客户优惠：月消费金额超过10万元的用户可以享受定制化的优惠方案。我们会根据具体使用情况，提供更优惠的价格和更灵活的结算方式。大客户还可以获得专属的服务经理和技术支持团队。</p>`
        },
        {
          title: '4. 服务保障',
          content: `
            <h3>4.1 服务承诺</h3>
            <p>为确保您获得优质的服务体验，我们做出如下服务承诺：</p>
            <p>服务质量保证：我们承诺API服务的可用性不低于99.9%。如果月度服务可用性未达到承诺标准，我们将按照服务等级协议（SLA）进行赔偿。赔偿标准为：可用性低于99.9%但高于99%时，赔偿当月服务费用的10%；可用性低于99%但高于98%时，赔偿当月服务费用的25%；可用性低于98%时，赔偿当月服务费用的50%。</p>
            <p>数据安全保护：我们采用业界领先的安全技术保护您的数据安全。所有数据传输采用TLS 1.2或更高版本的加密协议，数据存储使用AES-256加密算法。我们定期进行安全评估和渗透测试，及时修复潜在的安全漏洞。同时，我们建立了完善的数据备份机制，确保数据不会丢失。</p>
            <p>响应时间承诺：对于服务故障，我们承诺：重大故障（影响所有用户的服务中断）15分钟内响应，2小时内恢复；一般故障（影响部分用户或功能）30分钟内响应，4小时内恢复；轻微故障（不影响核心功能）2小时内响应，24小时内恢复。</p>

            <h3>4.2 技术支持</h3>
            <p>我们提供全方位的技术支持服务：</p>
            <p>在线支持：我们提供7×24小时的在线客服支持。您可以通过网站、客户端或API控制台中的在线客服功能获得即时帮助。在线客服可以解答常见问题、操作指导、故障处理等各类问题。对于复杂的技术问题，我们会转交给专业的技术支持团队处理。</p>
            <p>电话支持：我们提供5×8小时的电话技术支持服务。服务时间为工作日9:00-17:00。紧急情况下，您可以通过电话热线获得快速响应。电话支持主要处理紧急故障、重要业务咨询等问题。企业版用户可以享受7×24小时的电话支持服务。</p>
            <p>文档支持：我们提供详细的API文档、SDK文档、最佳实践指南等技术文档。文档内容持续更新，反映最新的功能特性和使用方法。您可以通过文档中心快速查找所需的技术信息。我们也欢迎用户反馈文档中的问题，帮助我们不断改进文档质量。</p>

            <h3>4.3 服务改进</h3>
            <p>我们致力于持续改进服务质量：</p>
            <p>性能优化：我们持续监控和优化API服务的性能。通过技术改进、架构优化、资源扩容等手段，不断提升服务的响应速度和并发处理能力。我们定期发布性能优化报告，让用户了解改进成果。</p>
            <p>功能升级：我们根据用户需求和技术发展，持续开发和升级API功能。每个季度至少发布一次重要功能更新，包括新增API、功能优化、接口改进等。重要更新会提前通知用户，并提供详细的更新说明和迁移指南。</p>
            <p>用户反馈：我们高度重视用户的反馈和建议。通过用户调研、满意度调查、功能需求收集等方式，了解用户的真实需求。我们建立了完善的反馈处理机制，确保用户的合理建议得到及时采纳和实施。</p>`
        },
        {
          title: '5. 其他条款',
          content: `
            <h3>5.1 知识产权</h3>
            <p>关于知识产权保护，我们规定如下：</p>
            <p>平台知识产权：本平台的所有内容，包括但不限于API接口设计、技术文档、商标标识、操作界面等，均受知识产权法律保护。未经我们书面许可，任何单位或个人不得擅自使用、复制、修改或传播这些内容。我们保留对侵权行为进行追究的权利。</p>
            <p>用户内容知识产权：用户通过API服务处理、生成的内容，其知识产权归属于用户。我们承诺不会擅自使用这些内容，除非获得用户的明确授权。用户保证其使用我们的服务不会侵犯第三方的知识产权，否则需要承担相应的法律责任。</p>
            <p>授权使用：用户在使用我们的服务时，我们授予用户有限的、非排他性的、不可转让的使用权。这种授权仅限于用户在正常业务过程中使用API服务，不包括对服务进行复制、修改、分发、销售或其他商业用途。</p>

            <h3>5.2 保密义务</h3>
            <p>双方的保密义务约定如下：</p>
            <p>保密信息范围：保密信息包括但不限于：技术资料、API设计方案、源代码、数据结构、商业计划、用户信息、定价策略等。无论这些信息以何种形式存在，只要是未公开的，都属于保密信息范围。</p>
            <p>保密义务：接收方应对获知的保密信息严格保密，采取必要的保护措施防止信息泄露。未经披露方书面同意，不得向第三方披露保密信息。在内部使用时，应遵循"最小必要"原则，只让必要知情的人员接触保密信息。</p>
            <p>例外情况：以下情况不受保密义务限制：信息接收前已公开的；非因接收方原因而公开的；接收方可以证明独立开发的；法律法规要求披露的。即使存在例外情况，接收方也应及时通知披露方。</p>

            <h3>5.3 责任限制</h3>
            <p>关于服务责任的限制规定如下：</p>
            <p>免责条款：我们不对以下情况承担责任：因不可抗力导致的服务中断或数据丢失；用户自身原因导致的损失；第三方原因导致的损失；用户违反本协议导致的损失。对于因服务中断给用户造成的损失，赔偿金额不超过用户当月支付的服务费用。</p>
            <p>责任范围：我们的责任仅限于直接损失，不包括间接损失、后果性损失、惩罚性损害赔偿等。对于用户使用API服务过程中产生的数据，我们仅承担存储和传输的责任，不对数据的内容承担责任。</p>
            <p>争议解决：任何因本服务条款引起的争议，双方应首先通过友好协商解决。协商不成的，任何一方均可向服务提供商所在地有管辖权的人民法院提起诉讼。本条款的解释、效力和争议解决均适用中华人民共和国法律。</p>`
        }
      ]
    }
  },

  methods: {
    scrollToSection(index) {
      this.currentSection = index;
      const element = document.getElementById(`section-${index}`);
      element.scrollIntoView({ behavior: 'smooth' });
    },

    contactSupport() {
      // 实现联系支持的逻辑
      console.log('Contacting support...');
    },

    async downloadPDF() {
      const element = document.querySelector('.terms-main');
      const opt = {
        margin: [20, 20, 20, 20],
        filename: 'terms-of-service.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };
      
      try {
        this.$message.info('正在生成PDF，请稍候...');
        await html2pdf().set(opt).from(element).save();
        this.$message.success('PDF下载成功');
      } catch (error) {
        console.error('PDF生成失败:', error);
        this.$message.error('PDF生成失败，请重试');
      }
    }
  },

  mounted() {
    // 监听滚动以更新当前章节
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const sectionId = entry.target.id;
          this.currentSection = parseInt(sectionId.split('-')[1]);
        }
      });
    }, { threshold: 0.5 });

    this.sections.forEach((_, index) => {
      const element = document.getElementById(`section-${index}`);
      if (element) observer.observe(element);
    });
  }
}
</script>

<style scoped>
/* 在最前面添加这些全局重置样式 */
ul, li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.terms-page {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 顶部横幅样式 */
.terms-banner {
  background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  color: white;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.banner-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.banner-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.waves {
  width: 100%;
  height: 100%;
}

.wave-group {
  animation: moveWaves 10s linear infinite;
}

@keyframes moveWaves {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 主要内容布局 */
.terms-content {
  max-width: 1400px;
  margin: -50px auto 0;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  gap: 2rem;
  position: relative;
}

/* 侧边导航栏 */
.terms-sidebar {
  position: sticky;
  top: 2rem;
  height: fit-content;
}

.terms-nav {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-item {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background: rgba(66, 133, 244, 0.05);
  color: #4285f4;
}

.nav-item.active {
  background: #4285f4;
  color: white;
}

/* 主要内容区域 */
.terms-main {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.terms-section {
  margin-bottom: 3rem;
}

.terms-section h2 {
  font-size: 2rem;
  background: linear-gradient(135deg, #4285f4, #34a853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e3f2fd;
}

.terms-section h3 {
  font-size: 1.5rem;
  color: #4285f4;
  margin: 2rem 0 1rem;
  position: relative;
  padding-left: 1rem;
}

.terms-section h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #4285f4, #34a853);
  border-radius: 2px;
}

.section-content {
  color: #333;
  line-height: 1.6;
}

.section-content ul {
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
}

.section-content li {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.section-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  background: #4285f4;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
  transition: all 0.3s ease;
}

.section-content li:hover {
  transform: translateX(5px);
  background: rgba(66, 133, 244, 0.05);
  border-radius: 4px;
  padding: 0.5rem 1rem 0.5rem 2rem;
}

.section-content li:hover::before {
  background: #34a853;
  transform: scale(1.2);
}

/* 右侧操作区 */
.terms-actions {
  position: sticky;
  top: 2rem;
  height: fit-content;
}

.action-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-card h3 {
  font-size: 1.2rem;
  color: #4285f4;
  margin-bottom: 1rem;
}

.action-card p {
  color: #666;
  margin-bottom: 1.5rem;
}

.action-card button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: #4285f4;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.action-card button:hover {
  background: #3367d6;
  transform: translateY(-2px);
}

.version-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.version-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  margin-bottom: 1rem;
}

.version-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4285f4;
  margin-bottom: 0.5rem;
}

.version-date {
  color: #666;
  font-size: 0.9rem;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .terms-content {
    grid-template-columns: 200px 1fr;
  }
  
  .terms-actions {
    display: none;
  }
}

@media (max-width: 768px) {
  .terms-content {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  
  .terms-sidebar {
    display: none;
  }
  
  .banner-content h1 {
    font-size: 2rem;
  }
}

/* 标题居中 */
.terms-section h2 {
  text-align: center;
  margin: 2rem 0;
  color: #1a237e;
  font-size: 1.8rem;
}

.terms-section h3 {
  text-align: center;
  color: #1a237e;
  margin: 1.5rem 0;
  font-size: 1.5rem;
}

/* 正文样式 */
.section-content p {
  text-align: left;
  text-indent: 2em;
  margin: 1.2rem 0;
  line-height: 1.8;
  color: #333;
}

/* 移除列表圆点 */
.section-content ul {
  margin: 1rem 0 !important;
  padding-left: 2em !important;
  list-style: none !important;
}

.section-content li {
  text-align: left;
  margin: 0.75rem 0 !important;
  padding-left: 0 !important;
  line-height: 1.8 !important;
  text-indent: 2em;
}

/* 移除之前的自定义圆点样式 */
.section-content li::before {
  display: none;
}

/* 打印样式 */
@media print {
  .terms-banner,
  .terms-sidebar,
  .terms-actions {
    display: none !important;
  }

  .terms-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .terms-main {
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .terms-section {
    page-break-inside: avoid;
    margin: 0 !important;
    padding: 0 !important;
  }
}
</style> 